<template>
  <div class="footers">
    <div class="footers-center">
      <div class="footers-center-top">
        <div class="footers-center-left">
          <div><img :src="information_img.img" alt=""></div>
          <div><a href=""><span>在线咨询</span><span>></span></a></div>
          <div><span>151-539-19759</span></div>
          <div><span>(09:00-22:00)</span></div>
          <div><span>support@jfh.com</span></div>
        </div>
        <div class="footers-center-size">
          <ul v-for="(s,index) in size" :key="index">
            <li>{{s.name}}</li>
            <li v-for="(i,key) in s.size" :key="key"><a href="">{{i}}</a></li>
          </ul>
        </div>
        <div class="footers-center-right">
          <div class="footers-center-img" v-for="(i,index) in imgs" :key="index">
            <div><img :src="i.img" alt=""></div>
            <div><span>{{i.title}}</span></div>
            <div><span>{{i.size}}</span></div>
          </div>
        </div>
      </div>
      <div class="footers-center-bottom">
        <p>
          <span>Copyright © 2021- 2022山东大智信息科技有限公司</span>
          <span><a href="">鲁ICP备2021035147号-3</a></span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      imgs:[
        {
          id:'1',
          img:require("@/assets/img/mazhi-mp.1b4db4ad.png"),
          title:'码智护航云',
          size:'助力政企数字化转型',
        },
        {
          id:'2',
          img:require("@/assets/img/yuyuan-mp.a36e7aca.png"),
          title:'云上软件园',
          size:'构建区域软件新生态',
        },
        {
          id:'3',
          img:require("@/assets/img/jetchat.png"),
          title:'微信订阅号',
          size:'解放号资讯动态',
        }
      ],
      size:[
        {
          id:'1',
          name:'解放号城市站',
          size:['政采招标','软件前沿','采购寻源','软件咨询','软件外包','服务直采','人力外包','产品工具','解放号商城','互联社区'],
        },
        {
          id:'2',
          name:'更多',
          size:['需求大厅','会员权益','供应商入驻','解放地图','English','关于'],
        },
        {
          id:'3',
          name:'友情链接',
          size:['中软国际','解放号','重庆市政府采购网','重庆市公共资源交易网'],
        }
      ],
      information_img:[],
    }
  },
  mounted() {
    this.http
      .type('/index',{ type: "banner",img:"header" })
      .then((response) => {
        this.information_img = response.data;
      })
  },
}
</script>

<style lang="less" scoped>
  .footers{
    width: 100%;
    background-color: #0d101a;
    height: auto;
    padding-top: 20px;
    margin-top: 40px;
    .footers-center{
      width: 80%;
      height: auto;
      margin: 0 auto;
      .footers-center-top{
        width: 100%;
        height: 290px;
        .footers-center-left{
          margin-top: 20px;
          width: 17.5%;
          float: left;
          height: auto;
          border-right: 2px solid #22252e;
          div span{
            color: white;
          }
          div img{
            width: 130px;
            height: 40px;
          }
          div:nth-child(2){
            height: 70px;
            font-size: 14px;
            line-height: 70px;
            span:last-child{
              margin-left: 5px;
            }
            a{
              text-decoration: none;
            }
          }
          div:nth-child(3) {
            margin-top: 5px;
            span{
              font-size: 24px;
              color: #58bc9f;
              font-weight: bold;
            }
          }
          div:nth-child(4){
            height: 35px;
            line-height: 35px;
            span{
              font-size: 12px;
              color: #676a70;
            }
          }
          div:last-child{
            margin-top: 25px;
            span{
              font-size: 13px;
            }
          }
        }
        .footers-center-size{
          width: 45%;
          height: auto;
          float: left;
          ul{
            width: 32% !important;
            margin:20px 1px 0px 30px;
            padding:0px;
            list-style-type:none;
            display: flex;
            flex-wrap: wrap;
            float: left;
            li{
              width: 50%;
              margin: 8px 0px;
              a{
                font-size: 13px;
                color: #808288;
                text-decoration: none;
              }
              a:hover{
                color: white;
              }
            }
            li:first-child{
              width: 100% !important;
              font-size: 16px;
              margin-bottom: 10px;
              margin-top: 0;
              color: white;
            }
          }
          ul:nth-child(2){
            margin:20px 0px 0px 20px;
          }
          ul:last-child{
            width: 25% !important;
            margin:20px 0px 0px 5px;
            padding:0px;
            li{
              width: 100% !important;
            }
          }
        }
        .footers-center-right{
          margin-top: 20px;
          width: 35%;
          height: auto;
          float: right;
          display: flex;
          justify-content: space-between;
          position: relative;
          .footers-center-img{
            width: 28%;
            height: auto;
            div {
              display: flex;
              justify-content: center;
              img{
                width: 90%;
                height: 90%;
                border-radius: 10px;
              }
              img:hover{
                cursor: pointer;
                transform: scale(1.2, 1.2);
                transition: .4s;
              }
            }
            div:nth-child(2){
              text-align: center;
              span{
                font-size: 14px;
                height: 40px;
                line-height: 40px;
                color: white;
                text-align: center;
              }
            }
            div:last-child{
              span{
                font-size: 13px;
                color: #98999b;
              }
            }
          }
        }
      }
      .footers-center-bottom{
        width: 100%;
        height: 60px;
        line-height: 35px;
        border-top: 1px solid #808288;
        p{
          span{
            color: #808288;
            font-size: 13px;
            a{
              color: #808288;
              text-decoration: none;
              margin-left: 5px;
            }
            a:hover{
              color: white;
            }
          }
          span:nth-child(2){
            margin: 0px 15px;
          }
        }
      }
    }
  }
</style>